<template>
  <div class="person">
    <h2>情况1：监听【ref】定义的【基本】类型的数据</h2>
    <h3>当前求和为:{{ sum }}</h3>
    <button @click="add">点击+1</button>
  </div>
</template>

<script lang="ts" setup name="Person1">
  import {ref,watch} from 'vue';
    //数据
    let sum=ref(0)

    //方法
    function add(){
      sum.value++
    }

    //监视
    //参数1：监听对象，参数2：到达敏感点时的回调函数
    //watch中监听的对象不需要点value
    const stopWatchSum=watch(sum,(newValue,oldVlaue)=>{
      console.log("sum改变了");
      console.log(newValue,oldVlaue);
      if(newValue==10){
        stopWatchSum()//一旦调用，则停止监视
      }
    })
    

</script>

<style scoped>
.person{
    background-color: #8eace8;
    box-shadow: 0 0 10px;
    border-radius: 10px;
}
</style>